import React, { useCallback } from 'react'
// useCallback  记忆函数
const MyButton = (props) => {
  return (
    <button onClick = { props.onClick }>点击</button>
  )
} 
const fontSize = { fontSize: '14px'}
function App() {
  // 每次调用App组件都会重新生成一个新的引用
  // const clickHandler = () => {
  //   console.log('点我点我')
  // }
  // 使用useCallBack 包裹 函数的定义，
  // 第二个参数类似于 useEffect的第二个参数
  // 数组中的每一项一旦值或者引用发生改变，
  // useCallback 就会重新返回一个新的记忆函数提供给后面进行渲染。
  /// fn = useCallback(() => { 函数代码}, [])
  const clickHandler = useCallback(() => {
    console.log('点我点我')
  }, []) 
  return (
    <div>
      <MyButton style={ fontSize } onClick= { clickHandler }></MyButton>
    </div>
  )
}

export default App